import { Button, Input, Space } from "antd"
import type { InputRef } from "antd"
import { useRef } from "react"

const DomDemo = () => {
  const domRef = useRef<InputRef>(null)
  const handleClick = () => {
    domRef.current?.focus()
  }
  return (
    <>
      <h3>--获取dom</h3>
      <Space>
        <Input
          ref={domRef}
          value='点击按钮聚焦'
          style={{ width: 200 }}
        />
        <Button onClick={handleClick} type="primary">useRef获取dom聚焦</Button>
      </Space>
      <ul>
        <li>ref标记dom，useRef获取绑定</li>
        <li>但是对于函数式组件，ref是无法标记的</li>
        <li>这个时候就需要使用forwardRef</li>
      </ul>
    </>
  )
}

export default DomDemo
